<template>
    <div class="swiper">
      <swiper indicator-dots="true" indicator-color="#a7a7a7" indicator-active-color="#57d9bf" autoplay="true" interval="5000" duration="500" previous-margin="10rpx" next-margin="18rpx">
      <block v-for="(item,index) in currentContent" :key="index">
        <swiper-item @click="goIntroduces(index)">
          <image v-bind:src="item.img" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        currentContent: this.$store.state.order,
        indicatorDots: false,
        autoplay: true,
        interval: 5000,
        duration: 500,
      }
    },
    methods: {
      goIntroduces: function (index) {
        wx.navigateTo({
          url: '/pages/hot/introduced/main?index='+index,
        });
      }
    },
  }
</script>

<style>
  .swiper{
    height: 415rpx;
    width: 100%;
    background: #f5f5f5;
    padding: 10px 0;
    overflow: hidden;
  }
  .swiper swiper{
    height: 415rpx;
  }
  .swiper .slide-image{
    border-radius: 10rpx;
    width: 99%;
    height: 100%;
    margin: 0 8rpx;
  }
</style>
